<template>
    <div style="height:100vh;position: relative;">
        <el-button type="text" icon="el-icon-upload2" class="edit" @click="stopEditingAndSave" v-if="editing">保存</el-button>
        <el-button type="text" icon="el-icon-edit" class="edit" @click="editInfo" v-else>编辑</el-button>
        <div class="slogan">公司简介</div>
        <div class="info">
            <div class="infodetail" v-if="editing">
                <el-input v-model="Company.introduce" type="textarea" style="width:80vw;"></el-input>
            </div>
            <div class="infodetail" v-else>
                {{ Company.introduce }}
            </div>
        </div>
        <div class="foot">
            <div class="exactAddress" v-if="editing">
                <el-input v-model="Company.address"></el-input>
            </div>
            <div class="exactAddress" v-else>
                公司地址：{{ Company.address }}
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {
    data() {
        return {
            editing: false,
            Company: {
                account: 1,
                companyName: '美团',
                companyCity: '广州',
                companyType: '服务行业',
                address: '广东省广州市',
                introduce: ''//'北京字节跳动科技有限公司，简称字节跳动，是一家位于中国北京的跨国互联网技术公司，成立于2012年3月，旗下有产品今日头条和抖音（及其海外版本TikTok）、西瓜视频Lemon8等。至2018年，字节跳动的移动应用月度用户超过十亿人，估值750亿美元，超越Uber成为全球最有价值的创业公司。截至2019年7月，字节跳动的产品和服务已覆盖全球150个国家和地区、75个语种，曾在40多个国家和地区位居应用商店总榜前列。在中国互联网企业中，字节跳动是第一家没有向阿里巴巴、腾讯或百度寻求商业保护或融资的创业公司；相反地，字节跳动被认为与百度、腾讯两大巨头有强烈的竞争关系，因字节跳动资金主要来源于抖音和今日头条的广告收入。至2020年3月，字节跳动已经有六万员工，并计划再增员一万人。投资人和内部消息将字节跳动2019年的营收定在1, 040亿元至1, 400亿元人民币，超过了Uber、Snapchat和推特的总和。在中国，其广告收入也超越了腾讯、仅次于阿里巴巴。抖音的全球下载量达1.15亿次，固定用户近10亿。'

            },
        }
    },
    mounted() {
        axios.get(`/company/home`,
            {
                params: {
                    account: this.$store.state.companyAccount
                }
            }
        ).then(response => {
            this.Company = response.data.data.company;
        }).catch(error => {
            console.log(error);
        })
    },
    methods: {
        editInfo() {
            this.editing = true
        },
        stopEditingAndSave() {
            this.editing = false;

            axios.post('/company/home',
                {
                    account: this.Company.account,
                    companyName: this.Company.companyName,
                    companyType: this.Company.companyType,
                    companyCity: this.Company.companyType,
                    introduce: this.Company.introduce,
                    address: this.Company.address,
                }
            ).then(res => {
                console.log(res);
            }
            )
        }

    }
}
</script>
<style scoped>
.info {
    position: relative;
    width: 85vw;
    height: 300px;
    margin-top: 70px;
    margin-left: 150px;
    background-color: #fff;
    z-index: 1
}

.slogan {
    position: absolute;
    left: 150px;
    top: -40px;
    font-size: 20px;
    font-weight: 600;
}

.infodetail {
    position: absolute;
    top: 50px;
    font-size: 17px;
    font-weight: 400;

}

.foot {
    position: relative;
    width: 85vw;
    height: 50px;
    margin-top: 20px;
    margin-left: 150px;
    background-color: rgb(0, 180, 179);
    font-size: 15px;
    font-weight: 500;
}

.exactAddress {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.edit {
    position: absolute;
    right: 150px;
    top: -50px;
    font-size: 18px;
    transition: font-size 0.5s ease-in-out;
}

.edit:hover {
    font-size: 22px;
}
</style>